<template>
	<view class="all">
		<u-popup v-model="fly" mode="center" width="90%" :mask-close-able='false'>
		<view class="flys">
			<view class="d_f j_c_c" style="font-size: 36rpx;color: black;padding-top: 38rpx;">
				领取规则
			</view>
			<view class="" style="margin-top: 45rpx;padding-left: 34rpx;font-size: 26rpx;">
				1. 每月赠送6张5元支付宝立减金 
			</view>
			<view class="" style="padding: 0 34rpx;font-size: 26rpx;">
2. 领取规则为：订阅期内每5天可领取一张，每月共可领取6张，过期不可再领取，每张立减金限领取后24小时内使用（支付宝立减金领取后将发放到您订购时填写的手机号注册的支付宝账户-卡包。该产品为虚拟商品请填写正确手机号）
			</view>
		</view>
			<!-- 	<image src="https://web.78keji.cn/yshimage/relst.png" mode="widthFix"
					style="width: 100%;position: relative;"></image> -->
		
		<view class="d_f j_c_c" style="margin-top: 42rpx;">
			<image src="https://web.78keji.cn/yshimage/now.png" mode="widthFix"
				style="width: 450rpx;position: relative;" @click="fly=false"></image>
		</view>
		
			</u-popup>
		<u-popup v-model="shows" mode="center" width="90%" :mask-close-able='false'>
		
				<image src="https://web.78keji.cn/yshimage/relst.png" mode="widthFix"
					style="width: 100%;position: relative;"></image>
		
		<view class="d_f j_c_c">
			<image src="https://web.78keji.cn/yshimage/now.png" mode="widthFix"
				style="width: 450rpx;position: relative;" @click="shows=false"></image>
		</view>
		
			</u-popup>
		<u-popup v-model="showx" mode="center" width="100%" :mask-close-able='false'>

			<image src="https://web.78keji.cn/yshimage/bgxs.png" mode="widthFix"
				style="width: 100%;position: relative;"></image>

			<view class="" style="width: 100%;position: absolute;top: 380rpx;">

				<view class="d_f j_c_c" style="width: 100%;margin-top: 48rpx;">
					<view class="d_f a_i_c "
						style="border: 1px solid #B3B3B3;width: 560rpx;height: 80rpx;border-radius: 40rpx;padding: 0 23rpx;">
						<image src="https://web.78keji.cn/newimgaes/icon.png" mode="widthFix" style="width: 43rpx;">
						</image>
						<view class="" style="width: 1rpx;
	height: 40rpx;border-right: 1px solid #999999;margin-left: 12rpx;">

						</view>
						<input type="number" placeholder="请输入领取支付宝账号" style="margin-left: 12rpx;" v-model="content">
					</view>
					<!-- 	<u-input v-model="content" type="text" placeholder-style="color:#B3B3B3" :border="border"
							style="width: 536rpx;margin: 0 auto;" /> -->
				</view>


			</view>
			<view class="d_f j_c_c">
				<image src="https://web.78keji.cn/yshimage/qr.png" mode="widthFix"
					style="width:536rpx;margin-top: 26rpx;" @click="viplingqu"></image>
			</view>
			<view class="d_f j_c_c">
				<image src="https://web.78keji.cn/newimgaes/quxiao.png" mode="widthFix"
					style="width: 68rpx;margin-top: 20rpx" @click="showx=false"></image>
			</view>


		</u-popup>
		<u-popup v-model="show" mode="bottom" width="90%" height="600" borderRadius="54">
			<view class="d_f j_c_c a_i_c f_d_c">
				<view class="title">
					请输入购买手机号进行登录
				</view>

				<view style="margin-top: 50rpx;">
					<u-field v-model="mobiles" label="手机号" placeholder="请填写手机号" maxlength="11" type="number">
					</u-field>
					<u-field v-model="code" label="验证码" placeholder="请填写验证码" type="number" maxlength="6">
						<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle"
							:disabled="disabled">{{getCodeText}}
						</u-button>
					</u-field>
				</view>
				<image src="https://web.78keji.cn/yshimage/lg.png" mode="widthFix" style="width:600rpx ;margin-top: 40rpx;"
					@click="login">
				</image>
			</view>


		</u-popup>
		<view class="box w_h_100">
			<view class="bossx">
				<view class="d_f a_i_c j_c_s_b bossss">
					<view class="d_f a_i_c">
						<image src="https://web.78keji.cn/yshimage/logo.png" mode="widthFix" style="width: 90rpx;">
						</image>
						<view class="" style="margin-left: 27rpx;" v-if="!mobile">
							请登录！！！
						</view>
						<view class="" v-else style="margin-left: 27rpx;">
							<view class="">
								欢迎您！！
							</view>
							<view class="" style="font-weight: bold;margin-top: 18rpx;">
								会员用户{{mobile}}
							</view>
						</view>
					</view>

					<view class="" v-if="!mobile">
						<!-- 	<button class="login" type="default" 
						scope='phoneNumber'>登录</button> -->
						<image src="https://web.78keji.cn/yshimage/newlogin.png" mode="widthFix" style="width: 120rpx;"
							@click="show=true"></image>
					</view>
					<view class="" v-else style="position: fixed;right: 0;">
						<!-- 	<button class="login" type="default" 
						scope='phoneNumber'>登录</button> -->
						<image src="https://web.78keji.cn/yshimage/qh.png" mode="widthFix" style="width: 120rpx;"
							@click="out"></image>
					</view>
				</view>
				<view class="d_f a_i_c j_c_s_b" style="margin-top: 144rpx;">
					<view class="">

					</view>
					<view class="d_f a_i_c j_c_s_b" style="color: white;font-size: 24rpx;padding-right: 54rpx;" @click="fly=true">
						领取规则
						<image src="https://web.78keji.cn/yshimage/guizes.png" mode="widthFix"
							style="width: 24rpx;margin-left: 9rpx;"></image>
					</view>
				</view>

			</view>
			<view class="d_f a_i_c j_c_c" style="margin-top: 300rpx;color: #1D1D1D;font-size: 36rpx;" v-if="!mobile">
				-请登录领取-
			</view>
			<view class="" v-else>
				<view class="d_f a_i_c j_c_c" style="color: #1D1D1D;font-size: 36rpx;" v-if="tldata.length>0">
					<view class="">

						<view v-for="(item,index) in tldata" :key="index"
							:class="index==tldata.length-1?'boss1':'boss'">

							<view class="" v-if="item.status==0||item.status==7"
								style="padding-bottom: 10rpx;background-color: #FAFAFA;">

								<image src="https://web.78keji.cn/yshimage/suss.png" mode="widthFix"
									style="width: 100%;"></image>
								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #FFFFFF;font-weight: 800;">

										<view class="money">
											{{item.money}}
										</view>

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #232323;font-weight: bold;">
											通用立减金
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #0F0F0F;margin-top: 13rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
										<image src="https://web.78keji.cn/newimgaes/nolinqu.png" mode="widthFix"
											style="width: 136rpx;" v-if="item.status==0" @click="viplq(item)"></image>

										<image src="https://web.78keji.cn/newimgaes/timeno.png" mode="widthFix"
											style="width: 136rpx;" v-if="item.status==7"></image>

									</view>
								</view>
							</view>
							<view class=""
								v-if="item.status==2||item.status==1||item.status==3||item.status==4||item.status==5||item.status==6"
								style="padding-bottom: 10rpx;background-color: #F0F5F7;">
								<image src="https://web.78keji.cn/yshimage/re.png" mode="widthFix"
									style="width: 660rpx;"></image>
								<view class="d_f" style="position: absolute;top: 0rpx;left: 30rpx;">
									<view class="d_f " style="color: #9A9A9A;font-weight: 800;">

										<view class="money">
											{{item.money}}
										</view>

									</view>
									<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
										<view class="" style="text-align: left;color: #9A9A9A;font-weight: bold;">
											通用立减金
										</view>
										<view class=""
											style="text-align: left;font-size: 16rpx;color: #9A9A9A;margin-top: 13rpx;">
											有效期{{item.starttime}}-{{item.endtime}}
										</view>
									</view>
									<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">

										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 136rpx"
											v-if="item.status==1">
											领取成功
										</view>
										<view class="" style="color: #5EBB72;font-size: 24rpx;width: 136rpx"
											v-if="item.status==3">
											发券成功
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx;width: 136rpx"
											v-if="item.status==2">
											发券失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class="" style="color: #E8593F;font-size: 24rpx" v-if="item.status==5">
											领取失败
											<view class="cx" @click="viplq(item)">
												重领
											</view>
										</view>
										<view class=""
											style="color: #999999;font-size: 24rpx;text-align: center;width: 136rpx"
											v-if="item.status==4">
											已核销

										</view>
										<view class=""
											style="color: #999999;font-size: 24rpx;text-align: center;width: 136rpx"
											v-if="item.status==6">
											已到期/退款
										</view>


									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="d_f a_i_c j_c_c" style="margin-top: 300rpx;color: #1D1D1D;font-size: 36rpx;" v-else>
					-暂无优惠券-
				</view>
			</view>
		</view>


	</view>
</template>


<script>
	import {
		wxLogin,
		sendSms,
		checkSms,
		getLog,
		ljjList,
		ljjLq

	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {

			return {
				fly:false,
				mobiles:'',
				shows:false,
				content: '',
				tldata: [],
				lists: [],
				mobile: '',
				show: false,
				code: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				ljjid: '',
				showx: false



			}
		},
		components: {

		},
		methods: {
			//支付宝领取
			viplingqu() {
				uni.showLoading({
					title: '领取中，请稍等',
					mask: true
				});
				ljjLq({
					openid: this.openid,
					type: 3,
					id: this.idx,
					account: this.content,
					accountType: 1,
					bankType: 2

				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					}); //弹出提示框
					this.showx = false
					this.shows=true
					this.getdata()
				}).catch((err) => {
					console.log(err)
					
				})
			},
			viplq(item) {
				this.idx = item.id
				this.showx = true
			},
			out() {
uni.clearStorage()
this.mobile=''
this.openid=''
this.code=''
			},
			//点击登录
			login() {
				if (this.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					});
				} else if (this.mobiles == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else {
					checkSms({
						mobile: this.mobiles,
						captcha: this.code,
						type: 3
					}).then((res) => {
						this.show = false
						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
						this.mobile = uni.getStorageSync('mobile')
						this.openid = uni.getStorageSync('openid')

						this.getdata()

					})
				}

			},
			getdata() {
				ljjList({
					openid: this.openid,
					type: 3,
					proType: 10
				}).then((res) => {
					console.log(res)
					this.tldata = res.data
					for (var i in this.tldata) {
						if (this.tldata[i].status == 0) {
							if (Date.now() < this.tldata[i].starttime * 1000) {
								this.tldata[i].status = '7'
							}
							if (Date.now() > this.tldata[i].endtime * 1000) {
								this.tldata[i].status = '6'
							}

						}

						this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
							"YYYY-MM-DD")
						this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
					}
				})

			},
			getCode() {
				sendSms({
					mobile: this.mobiles,

				}).then((res) => {
					this.disabled = true
					this.getCodeText = "发送中..." //发送验证码
					this.getCodeisWaiting = true;
					setTimeout(() => {
						//this.$common.msg('验证码已发送')
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框
						this.setTimer(); //调用定时器方法
					}, 1000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},




		},
		onLoad(option) {




			if (uni.getStorageSync('openid')) {

				this.openid = uni.getStorageSync('openid')
				this.getdata()
			}
			if (uni.getStorageSync('mobile')) {

				this.mobile = uni.getStorageSync('mobile')

			}




		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.all {
		position: relative;
		min-height: 100%;
		background-color: #F0F5F7;

	}

	.bottom {
		width: 750rpx;
		padding: 45rpx 24rpx 33rpx 24rpx;
		background: #F7F7F7;
		border-radius: 41rpx;

	}

	.bottoms {
		width: 750rpx;
		padding: 45rpx 24rpx 33rpx 24rpx;

		border-radius: 41rpx;

	}

	.bossx {
		background-image: url('https://web.78keji.cn/images/bgx.png');
		background-size: 100% 100%;
		height: 384rpx;



	}

	.bossss {
		padding: 25rpx 0 0 40rpx;


	}

	.money {
		margin-left: 24rpx;
		font-size: 90rpx;
		color: white;
	}

	.unit {
		margin-top: 50rpx;
		color: white;
		font-size: 40rpx;
	}

	.boss1 {
		background-color: white;
		width: 662rpx;
		border-radius: 12rpx;
		margin: 0 auto;

		text-align: center;
		position: relative;
	}

	.boss {
		background-color: white;
		width: 662rpx;

		margin: 0 auto;

		text-align: center;
		position: relative;


	}

	.login {
		width: 120rpx;
		height: 42rpx;
		background: #000000;
		border-radius: 20rpx;
		color: white;
		font-size: 24rpx;
		line-height: 42rpx;
	}

	.banner {
		padding: 0 24rpx 24rpx 24rpx;
		background-color: white;
		margin-top: -20rpx;

	}

	.columnx {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 235rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
	}

	.bindx {
		width: 25%;



		padding: 14rpx 0 14rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bracelet {
		width: 96rpx;
		height: 96rpx;
	}

	.binding {
		margin-top: 20rpx;
	}

	.second {
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
	}

	.card {
		padding: 0 14rpx 0 14rpx;
	}

	.images {
		padding-top: 33rpx;
		padding-left: 12rpx;

	}

	.title {

		font-size: 34rpx;

		font-weight: 400;
		color: #1A1A1A;
		margin-top: 50rpx;

	}
	.flys{
		width: 562rpx;
		height: 410rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin: 0 auto;
	}
</style>